<template>
	<view class="container index-container">
		<view>
			<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-img" :src="$fileUrl+'banner.png'" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="index-main">
			<view class="index-action">
				<view class="action-list" @click="jumpTag('/pages/sponsor/index')">
					<image class="action-img" :src="$fileUrl+'农场认养.png'" mode="widthFix"></image>
					<text>农场认养</text>
				</view>
				<view class="action-list" @click="jumpTag('/pages/rent/index')">
					<image class="action-img" :src="$fileUrl+'农场租地.png'" mode="widthFix"></image>
					<text>农场租地</text>
				</view>
				<view class="action-list" @click="jump('/pages/monitor/index')">
					<image class="action-img" :src="$fileUrl+'农场监控.png'" mode="widthFix"></image>
					<text>农场监控</text>
				</view>
				<view class="action-list" @click="jump('/pages/activity/index')">
					<image class="action-img" :src="$fileUrl+'农场活动.png'" mode="widthFix"></image>
					<text>农场活动</text>
				</view>
			</view>
			<view class="index-info">
				<image class="info-img" :src="$fileUrl+'农场资讯.png'" mode="widthFix"></image>
				<view class="info-ico">Now</view>
				<view class="info-words no-warp">
					{{firstNew.title}}
				</view>
			</view>
			<view class="index-data">
				<view class="panel-title">
					<text>实时数据</text>
					<text class="panel-title-tips">更新于：2024-10-09 13:00</text>
				</view>
				<view class="data-list-box">
					<view class="data-list" v-for="item in dataList" :key="item.name">
						<image class="data-bg" :src="$fileUrl+item.img" mode="widthFix"></image>
						<view class="data-box">
							<view class="data-title">{{item.name}}</view>
							<view class="data-info">{{item.info}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app"
	import api from '@/common/api';
	import { hideLoading, showLoading } from '@/common/util';
	import commonStore from '../../store/commonStore';
	const dataDefList = [
		{ name: '温度', resName: '空气温度1', img: 'idx-data-温度.png', info: '0°C' },
		{ name: '湿度', resName: '空气湿度1', img: 'idx-data-湿度.png', info: '60' },
		{ name: '风向', resName: '风向', img: 'idx-data-风向.png', info: '东南' },
		{ name: '风速', resName: '风速', img: 'idx-data-风速.png', info: '1m/s' },
		{ name: '雨量', resName: '雨量', img: 'idx-data-雨量.png', info: '100ml' },
		{ name: '光照', resName: '光照', img: 'idx-data-光照.png', info: '0Lux' }
	]
	const dataList = ref([])
	let shareId = ''
	let shareType = ''
	onLoad((options) => {
		shareId = options.shareId;
		shareType = options.shareType;
	})
	onShow(async () => {
		if (commonStore.state.reload.indexOf('index') >= 0) {
			getWeather()
			commonStore.commit('delReload', 'index')
		}
	})
	onMounted(async () => {
		setShareInfo()
		getWeather()
		getFirstNew()
	})


	const firstNew = ref({ title: '' })
	const getFirstNew = async () => {
		showLoading()
		try {
			const res = await api.getFirstNews()
			firstNew.value = res.data || {}
		} finally {
			hideLoading()
		}
	}
	const setShareInfo = () => {
		if (shareType === 'sponsor') {
			uni.navigateTo({
				url: '/pages/sponsor/detail?id=' + shareId
			})
		}else if(shareType === 'activity') {
			uni.navigateTo({
				url: '/pages/activity/detail?id=' + shareId
			})
		}else if(shareType === 'rent') {
			uni.navigateTo({
				url: '/pages/rent/detail?id=' + shareId
			})
		}
	}
	const getWeather = async () => {
		showLoading()
		try {
			const res = await api.getWeather()
			dataList.value = dataDefList.map((item) => {
				const find = res.data.data.find(one => {
					return one.name === item.resName
				})
				return {
					...item,
					info: find?.value || ''
				}
			})

		} finally {
			hideLoading()
		}

	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const jumpTag = (url : string) => {
		uni.switchTab({ url: url })
	}
</script>

<style lang="scss">
	.index-container {
		padding-bottom: 120rpx;
		background-color: #F9F9F9;

		.swiper {
			height: 675rpx;
		}

		.banner-img {
			width: 100%;
		}

		.index-main {
			background-color: #F9F9F9;
			border-radius: 14rpx 14rpx 0 0;
			transform: translateY(-50rpx);
			padding: 0 30rpx;
		}

		.index-action {

			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx;
		}

		.action-img {
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin: 0 auto;
		}

		.action-list {
			text-align: center;
			font-size: 24rpx;
			color: #494949;
		}

		.index-info {
			display: flex;
			align-items: center;
			background-color: #fff;
			width: 100%;
			margin: 0 auto;
			padding: 10rpx 0;
			border-radius: 8rpx;
			margin-top: 20rpx;
		}

		.info-img {
			width: 150rpx;
			height: 50rpx;
		}

		.info-ico {
			background-color: rgba(238, 111, 0, 0.2);
			border: solid 1px #EE6F00;
			font-size: 20rpx;
			color: #EE6F00;
			padding: 0 6rpx;
			border-radius: 4rpx;
			margin: 0 10rpx;
		}

		.info-words {
			color: #6D6D6D;
			font-size: 26rpx;

		}

		.index-data {
			margin-top: 40rpx;
		}

		.panel-title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.panel-title-tips {
			font-size: 24rpx;
			color: #6D6D6D;
			font-weight: lighter;
			margin-left: 20rpx;
		}

		.data-list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 8rpx;
		}

		.data-list {
			width: 336rpx;
			display: inline-block;
			position: relative;
			margin-bottom: 15rpx;
		}

		.data-bg {
			width: 100%;
			height: 70rpx;
			display: block;
		}

		.data-box {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			padding: 20rpx 0 0 30rpx;
		}

		.data-title {
			font-weight: bold;
			font-size: 30rpx;
		}

		.data-info {
			font-weight: bold;
			font-size: 30rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}
	}
</style>